import React from "react";
import { Tabs, WhiteSpace, Button } from "antd-mobile";
import { getQueryString } from "@/utils/utils.js";
import { proxy, http } from "@/utils/request/index.js";
import api from "@/utils/api.js";
import { withRouter } from "react-router-dom";
import "./index.less";
const statusBackMap = {
  "01": <span className="col-F2912C">处理中</span>,
  "00": <span className="col-8C8C8C">还款成功</span>,
  "99": <span className="col-FF8A72">还款失败</span>,
  "30": <span className="col-595959">还款待审核</span>,
};
class RepaymentDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      detail: {
        dateStart: "",
        dateEnd: "",
        amount: "",
        days: "",
      },
      order: {},
    };
  }
  componentWillMount() {
    let id = getQueryString("id");
    http
      .postJson(api.getRepayItemById, {
        id: id,
      })
      .then((res) => {
        this.setState({
          detail: res.data,
          order: res.data.order,
        });
      });
  }
  render() {
    let { detail, order } = this.state;
    return (
      <div className="bgc-f4 previewDetail">
        <div className="top bgc-fff text-center">
          <h3>预支金额(元)</h3>
          <h1 className="col-green ft-28">{detail.amount}</h1>
          <p>{statusBackMap[detail.status]}</p>
        </div>
        <WhiteSpace size="md" />
        {detail.status !== "00" ? (
          <div className="bottom bgc-fff">
            <div className="w title ft-bold">
              <p>预支明细</p>
            </div>
            <div className="w">
              <div className="flex flex-between">
                <p>还款日期</p>
                <p>{order.dateEnd}</p>
              </div>
              <div className="flex flex-between">
                <p>期限</p>
                <p>{order.day}</p>
              </div>
              <div className="flex flex-between">
                <p>到期应还</p>
                <p>{order.amountEnd}</p>
              </div>
              <div className="flex flex-between">
                <p>收款账号</p>
                <p>{order.inAccount}</p>
              </div>
              <div className="flex flex-between">
                <p>借款协议</p>
                <Button
                  type="ghost"
                  onClick={() => {
                    this.props.history.push("protocol");
                  }}
                  style={{
                    padding: "0 1em",
                    lineHeight: "30px",
                    height: "30px",
                  }}
                >
                  查看
                </Button>
              </div>
            </div>
          </div>
        ) : (
          ""
        )}

        <WhiteSpace size="md" />
        <div className="bottom bgc-fff">
          <div className="w title ft-bold">
            <p>还款明细</p>
          </div>
          <div className="w">
            <div className="flex flex-between">
              <p>已还本金</p>
              <p>{detail.amountEnd}</p>
            </div>
            <div className="flex flex-between">
              <p>已还利息</p>
              <p>{detail.feeEnd}</p>
            </div>
            <div className="flex flex-between">
              <p>违约金</p>
              <p>{detail.defaultAmount}</p>
            </div>
            <div className="flex flex-between">
              <p>借款金额</p>
              <p>
                <span>{detail.amount} </span>
                <span
                  className="col-green"
                  onClick={() => {
                    this.props.history.push(
                      "previewRecordDetail?id=" + order.id
                    );
                  }}
                >
                  预支详情
                </span>
              </p>
            </div>
            <div className="flex flex-between">
              <p>预支时间</p>
              <p>{detail.dateStart}</p>
            </div>
            <div className="flex flex-between">
              <p>还款凭证</p>
            </div>
            <div className="flex flex-between">
              {detail.relaVoucher ? (
                <img
                  style={{ width: "3rem" }}
                  src={proxy.baseUrl + detail.relaVoucher}
                />
              ) : (
                ""
              )}{" "}
            </div>
          </div>
        </div>

        <WhiteSpace size="xl" />
      </div>
    );
  }
}

export default withRouter(RepaymentDetail);
